import React from 'react'
import "./Header.less";
import {withRouter} from "react-router-dom"
function Header(props) {
   
    let { title, back, register,history:{goBack,push} } = props;
    //this.propos.history.push(path) 添加一条新的历史记录$router.push()
    // this.propos.history.replace(path)用新的替换旧的$router.replace()
    //this.propos.history.goBack()返回
    //在路由组件，编程式导航是可以直接使用
    // 在非路由组件 propos是没有history的需要通过witchRoute高阶组件将组件变成路由
    return (
        <div className='header'>
            {back ? <span className='header-back' onClick={() => goBack()}>返回</span> : null}
            <h3 className='header-title'>{title}</h3>
            {register ? <span className='header-register' onClick={() => push('/register')}>注册</span> : null}
        </div>
    )
}

// witchRoute高阶组件让非路由组件上的propos产生history可做返回上一个路由路径也就是返回上一个页面
export default withRouter(Header)
